<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Group Link</title>
    <script src="../dist/quark-renderer.js"></script>
  </head>
  <body>
    <div id="main" style="width: 1024px; height: 800px"></div>
    <script type="text/javascript">
      let qr = QuarkRenderer.init(document.getElementById('main'));
      let boRect = new QuarkRenderer.BORect({
        draggable: true,
        linkable: true,
        resizeStrategy: 'resize',
        position: [100, 100],
        shape: {
          width: 200,
          height: 80,
        },
        style: {
          fill: '#61DAFB',
          stroke: 2,
        },
        title: 'Role',
        fields: [
          {
            name: 'Id',
            type: 'String',
          },
          {
            name: 'RoleName',
            type: 'String',
          },
        ],
      });

      qr.add(boRect);

      console.log(boRect.toJSONObject());

      boRect = new QuarkRenderer.BORect({
        draggable: true,
        linkable: true,
        resizeStrategy: 'resize',
        position: [350, 100],
        shape: {
          width: 200,
          height: 80,
        },
        style: {
          fill: '#61DAFB',
          stroke: 2,
        },
        title: 'User',
        fields: [
          {
            name: 'Id',
            type: 'String',
          },
          {
            name: 'UserName',
            type: 'String',
          },
          {
            name: 'Password',
            type: 'String',
          },
        ],
      });

      qr.add(boRect);

      console.log(boRect.toJSONObject());

      let visioLink = new QuarkRenderer.VisioLink({
        position: [100, 200],
        draggable: true,
        isCable: true,
        showTransformControls: true,
        arrowType: 'end',
        style: {
          // lineDash: [10, 10],
          // stroke: 'rgba(20, 220, 60, 0.8)',
          lineWidth: 2,
          text: '1:n',
        },
        shape: {
          points: [
            [10, 10],
            [500, 10],
          ],
        },
      });
      qr.add(visioLink);

      visioLink.on('afterRender', () => {
        // console.log(visioLink.toJSONObject());
        console.log(qr.toJSONObject());
      });
    </script>
    <div id="Main" style="width: 600px; height: 400px"></div>
  </body>
</html>
